<template>
  <div class="product-list-wrap">
    <el-form :inline="true" label-width="150px" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item :label="$t('product.name')">
        <el-input v-model="dataForm.name" :placeholder="$t('product.name')" clearable></el-input>
      </el-form-item>
      <!--      <el-form-item :label="$t('product.keyword')">-->
      <!--        <el-input v-model="dataForm.keyword" :placeholder="$t('product.keyword')" clearable></el-input>-->
      <!--      </el-form-item>-->
      <el-form-item label="商品类型">
        <ren-select v-model="dataForm.type" dict-type="product_type" placeholder="商品类型"></ren-select>
      </el-form-item>
      <!--      <el-form-item :label="$t('product.isSell')">-->
      <!--        <ren-select v-model="dataForm.status" dict-type="product_shell" :placeholder="$t('product.isSell')"></ren-select>-->
      <!--      </el-form-item>-->
      <el-form-item label="课程类型">
        <ren-select v-model="dataForm.lessonType" dict-type="lessonType" placeholder="课程类型"></ren-select>
      </el-form-item>
      <el-form-item label="是否上架">
        <ren-select v-model="dataForm.isSell" dict-type="product_issell" placeholder="是否上架"></ren-select>
      </el-form-item>
      <el-form-item label="适用年级">
        <ren-select v-model="dataForm.grade" dict-type="product_grade" placeholder="适用年级"></ren-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">{{ $t("query") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="reset()">{{ $t("reset") }}</el-button>
      </el-form-item>
    </el-form>
    <div class="product-list-wrap__options-list">
      <el-button type="danger" @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>
    </div>
    <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle" style="width: 100%">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="code" label="商品编号" sortable="custom"></el-table-column>
      <el-table-column prop="title" label="商品名称" header-align="center"></el-table-column>
      <el-table-column prop="type" label="商品类型" header-align="center" align="center">
        <template v-slot="scope">
          <template v-if="scope.row.type == 1">课程</template>
          <template v-if="scope.row.type == 2">资料</template>
          <template v-if="scope.row.type == 3">学杂</template>
          <template v-if="scope.row.type == 4">服杂</template>
        </template>
      </el-table-column>
      <el-table-column prop="lessonType" label="课程类型">
        <template v-slot="scope">
          <template v-if="scope.row.lessonType == 1">1 v 1</template>
          <template v-else>1 v N</template>
        </template>
      </el-table-column>
      <el-table-column prop="lessonForm" label="形式">
        <template v-slot="scope">
          <template v-if="scope.row.lessonForm == 1">线上</template>
          <template v-else-if="scope.row.lessonForm == 2">线下</template>
          <template v-else>OMO</template>
        </template>
      </el-table-column>
      <el-table-column prop="isSell" label="状态">
        <template v-slot="scope">
          <template v-if="scope.row.isSell == 1">下架</template>
          <template v-else>下架</template>
        </template>
      </el-table-column>
      <el-table-column prop="grade" label="适用年级"> </el-table-column>
      <el-table-column prop="payType" label="付款类型">
        <template v-slot="scope">
          <template v-if="scope.row.payType == 1">预充值</template>
          <template v-if="scope.row.payType == 2">后置结算</template>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
        <template v-slot="scope">
          <el-button type="text" size="small" v-if="scope.row.isSell == 1" @click="handleStatus(scope.row.id, 1)">上架</el-button>
          <el-button type="text" size="small" v-if="scope.row.isSell == 2" @click="handleStatus(scope.row.id, 2)">下架</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script lang="ts">
import useView from "@/hooks/useView1";
import { defineComponent, reactive, toRefs } from "vue";
import AddOrUpdate from "./edit.vue"
import baseService from "@/service/baseService";
export default defineComponent({
  components: {
    AddOrUpdate
  },
  setup() {
    const state = reactive({
      getDataListURL: "/product/list",
      getDataListIsPage: true,
      // deleteURL: "/demo/product",
      deleteIsBatch: true,
      dataForm: {
        lessonType: "",
        name: "",
        status: "",
        isSell: "",
        grade: "",
        type: ""
      },
      keys: {
        date: ["createTimeStart", "createTimeEnd"]
      }
    });
    // return { ...useView(state), ...toRefs(state) }
    return { ...useView(state), ...toRefs(state) ,

      reset(){
        state.dataForm = {
          lessonType: "",
          name: "",
          status: "",
          isSell: "",
          grade: "",
          type: ""
        },
          state.keys = {
            date: ["createTimeStart", "createTimeEnd"]
          }
      },
    };

  },
  methods: {
    handleStatus(id: any, isSell:any) {
      baseService.post('/product/queryForSell', { id }).then((res) => {
        if (res.code !== 0) {
          this.$confirm('请注意，下架商品后，历史订单和排课仍然有效，新的订单和排课不再支持使用“下架商品”！<br /><p style="color: red;">当前有：XX订单购买了该商品，相关排课共计XX课时，涉及xx个学员</p>', '商品管理', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            dangerouslyUseHTMLString: true,
            type: 'warning'
          }).then(() => {
            baseService.post('/product/updateIsSell', { id,isSell }).then(() => {
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.getDataList()
                }
              })
            })
          })
        } else {
          baseService.post('/product/updateIsSell', { id,isSell }).then(() => {
            this.$message({
              message: this.$t("prompt.success"),
              type: "success",
              duration: 500,
              onClose: () => {
                this.getDataList()
              }
            })
          })
        }
      })
    }
  }
});
</script>
<style lang="sass" scoped>
.product-list-wrap
  &__options-list
    margin-bottom: 22px
    display: flex
    flex-direction: row
    justify-content: flex-end
</style>
